<template>
  <div class="page">
    <m-header title="AI-QuantAnt" :canback="false">
      <select class="sel" v-model="langId" @change="getselLang()">
        <option v-for="item in langList" :key="item.id" :value="item.id">{{item.lang}}</option>
      </select>
    </m-header>
    <div class="body">
      <header class="header">
        <img src="../../assets/images/szxz/tongzhi_LOGO.png" alt />
        <div class="hea-con">{{home?home.head:''}}</div>
      </header>
      <swiper :options="swiperOption" class="swiper-wrap" ref="mySwiper" v-if="banner.length!=0">
        <swiper-slide v-for="(item, index) in banner" :key="index">
          <img :src="api+item" class="title-img" style="width: 100%;" />
        </swiper-slide>
        <!-- 常见的小圆点 -->
        <div
          class="swiper-pagination"
          v-for="(item,index) in banner"
          :key="index"
          slot="pagination"
        ></div>
      </swiper>
      <ul class="profit-wrap">
        <li
          class="profit-list"
          v-for="(item,index) in robotList"
          :key="index"
          @click="single(item.id)"
        >
          <div class="profit-list-wrap">
            <div class="profit-left">
              <div class="profit-name">{{item.name}}</div>
              <div>
                {{home?home.state:''}}：
                <span class="profit-state">{{item.status}}</span>
              </div>
            </div>
            <div class="profit-right">
              <div class="profit-num">{{item.dayandnetincome[1][0]}}%</div>
              <div>{{item.type}}</div>
            </div>
          </div>
        </li>
        <li class="topBtn progress">
          <div class="btn-list" @click="goTo('Exchange')">{{home?home.quick_exchange:''}}</div>
          <div class="btn-list" @click="goTo('Robot')">{{home?home.buy_immediately:''}}</div>
          <!-- <div class="progress-left-wrap progress-wrap-share">
            <span class="progress-left progress-left-share" ref="state1"></span>
          </div>
          <div class="progress-right-wrap progress-wrap-share">
            <span class="progress-right progress-left-share" ref="state2"></span>
          </div>-->
        </li>
        <!-- <li class="progress-bot">
          <span class="progress-con">system working state {{stateList.work}}</span>
          <span class="progress-con">system saturated state {{stateList.saturated}}</span>
        </li>-->
      </ul>
      <div class="notice">
        <img src="../../assets/images/szxz/gonggao.png" alt class="notice-img" />
        <div class="notice-con" @click="notice">
          <span class="notice-title">{{noticeTitle?noticeTitle.title:New.announcement}}</span>
          <span class="more">{{home?home.more:''}}</span>
        </div>
      </div>
      <div class="quotation">
        <img :src="zxhqImg" alt class="quotation-img" />
        <ul class="quotation-wrap">
          <!-- v-for="item in priceList" :key="item.name" -->
          <li class="quotation-list" v-for="item in priceList" :key="item.name">
            <div class="list-number" style="color:#FF63BB">{{item.name}}</div>
            <div class="list-number" style="color:#7ED321">{{item.change_daily}}%</div>
            <div class="list-number" style="color:#333">$ {{item.latestPrice}}</div>
          </li>
        </ul>
        <div class="source">{{home?home.data_from:''}}</div>
      </div>
      <div class="csqa">
        <img :src="txgxjhImg" alt class="csqa-img" />
        <div class="csqa-buy">
          <div class="csqa-title" @click="buyPlan('AcquisitionPlan',1)">{{home?home.ac_plan:''}}</div>
          <ul class="quotation-wrap">
            <li class="quotation-list">
              <div style="color:#333">{{home?home.total:''}}</div>
              <div class="csqa-buy-num">${{planInfoList.one_all}}</div>
            </li>
            <li class="quotation-list">
              <div style="color:#333">{{home?home.remaining:''}}</div>
              <div class="csqa-buy-num">${{planInfoList.one_quota}}</div>
            </li>
            <li class="quotation-list">
              <div style="color:#333">{{home?home.recovery:''}}</div>
              <div class="csqa-buy-num">{{planInfoList.one_date}}</div>
            </li>
          </ul>
        </div>
        <div class="csqa-buy">
          <div class="csqa-title" @click="buyPlan('AcquisitionPlan',2)">{{home?home.rd_plan:''}}</div>
          <ul class="quotation-wrap">
            <li class="quotation-list">
              <div style="color:#333">{{home?home.total:''}}</div>
              <div class="csqa-buy-num">${{planInfoList.two_all}}</div>
            </li>
            <li class="quotation-list">
              <div style="color:#333">{{home?home.remaining:''}}</div>
              <div class="csqa-buy-num">${{planInfoList.two_quota}}</div>
            </li>
            <li class="quotation-list">
              <div style="color:#333">{{home?home.recovery:''}}</div>
              <div class="csqa-buy-num">{{planInfoList.two_date}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div id="main" style="width: 90%;margin:auto;height:370px;"></div>
    </div>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import { Index, Owner, Base } from "@/server/server.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapGetters } from "vuex";
require("swiper/dist/css/swiper.css"); //引入swiper.css
const echarts = require("echarts");
export default {
  data() {
    return {
      priceList: [],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        // 分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      },
      zxhqImg: null,
      txgxjhImg: null,
      defImg1: require("../../assets/images/szxz/zxhq.png"),
      banner: [],
      noticeTitle: {},
      robotList: [],
      stateList: {},
      planInfoList: {},
      langList: [
        {
          id: 1,
          lang: "简体中文"
        },
        {
          id: 2,
          lang: "English"
        },
        {
          id: 3,
          lang: "繁体"
        }
      ],
      langType: "zh-cn",
      langId: null,
      rawData: [],
      myChart: null,
      dates: [],
      chartData: [],
      option: {},
      home: {},
      New: {},
      today: {},
      max: [],
      min: [],
      chMax: [],
      chMin: [],
      differenceValue: [],
      colorList: [
        "#FFEB3B",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#91c7ae",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3"
      ],
      labelFont: "bold 12px Sans-serif"
    };
  },
  created() {
    this.langId = this.getLangId;
    if (!localStorage.getItem("lang")) {
      this.setLanguage();
    } else {
      this.home = this.lang.Index;
      this.New = this.lang.new;
      this.today = this.lang.today;
      this.getImg();
      this.csqaChange();
    }
    // this.csqaChange();

    this.getBanner();
    this.getNotice();
    this.price();
    this.random();
    this.getPlanInfo();

    // console.log(this.lang)
  },
  mounted() {},
  methods: {
    getImg() {
      // console.log(this.langId);
      switch (Number(this.langId)) {
        case 1:
          this.zxhqImg = require("../../assets/images/szxz/zxhq.png");
          this.txgxjhImg = require("../../assets/images/szxz/txgxjh.png");
          break;
        case 2:
          this.zxhqImg = require("../../assets/images/szxz/zxhqEn.png");
          this.txgxjhImg = require("../../assets/images/szxz/txgxjhEn.png");
          break;
        case 3:
          this.zxhqImg = require("../../assets/images/szxz/zxhq.png");
          this.txgxjhImg = require("../../assets/images/szxz/txgxjhtw.png");
          break;
      }
    },
    //获取K线图数据
    csqaChange() {
      Index.csqaChange({}).then(res => {
        this.rawData = res.data.reverse();
        this.getData();
      });
    },
    getData() {
      //从数组中获取横坐标时间，每条曲线的要显示的数据
      this.dates = this.rawData.map(function(item) {
        return item[6];
      });

      //最大值最小值
      this.max = this.rawData.map(function(item) {
        return item[2];
      });
      this.min = this.rawData.map(function(item) {
        return item[1];
      });

      //区间
      this.chMax = this.rawData.map(function(item) {
        return item[4];
      });
      this.chMin = this.rawData.map(function(item) {
        return item[3];
      });

      //差值
      this.differenceValue = this.rawData.map(function(item) {
        return parseFloat(item[2] - item[1]).toFixed(2);
      });
      // console.log(this.differenceValue)

      this.chartData = this.rawData.map(function(item) {
        return [+item[1], +item[2], +item[3], +item[4]];
      });

      this.chart();
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("main"));
      this.myChart.setOption(this.option);
    },

    goTo(name) {
      this.$router.push({ name: name });
    },
    single(id) {
      this.$router.push({ name: "Rent", params: { id: id } });
    },
    getPlanInfo() {
      Index.planInfo({}).then(res => {
        if (res.code == 1) {
          this.planInfoList = res.data;
        }
      });
    },
    getselLang() {
      switch (this.langId) {
        case 1:
          this.langType = "zh-cn";
          this.setLanguage();
          this.$store.commit("saveLangId", 1);
          localStorage.setItem("langId", 1);
          break;
        case 2:
          this.langType = "en";
          this.setLanguage();
          this.$store.commit("saveLangId", 2);
          localStorage.setItem("langId", 2);
          break;
        case 3:
          this.langType = "zh-tw";
          this.setLanguage();
          this.$store.commit("saveLangId", 3);
          localStorage.setItem("langId", 3);
          break;
      }
    },
    setLanguage() {
      Base.setLanguage({ lang: this.langType }).then(res => {
        if (res.code == 1) {
          this.getLanguage();
        }
      });
    },
    getLanguage() {
      Base.getLanguage().then(res => {
        if (res.code == 1) {
          localStorage.setItem("lang", JSON.stringify(res.data));
          this.$store.commit("saveLang", null);
          location.reload();
          this.home = this.lang.Index;
        }
      });
    },
    chart() {
      let _This = this;
      this.option = {
        backgroundColor: "#fff",
        animation: false,
        color: _This.colorList,
        title: {
          left: "center",
          text: _This.New.candle
        },
        legend: {
          top: 30,
          data: [
            "CSQA",
            _This.today.open,
            _This.today.close,
            _This.home.minimum,
            _This.home.maximum
          ]
        },
        tooltip: {
          triggerOn: "none",
          transitionDuration: 0,
          confine: true,
          bordeRadius: 4,
          borderWidth: 1,
          borderColor: "#333",
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: {
            fontSize: 12,
            color: "#333"
          },
          position: function(pos, params, el, elRect, size) {
            var obj = {
              top: 60
            };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          }
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: [0, 1]
            }
          ]
        },
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: [0, 1],
            realtime: false,
            start: 20,
            end: 70,
            top: 85,
            height: 20,
            handleIcon:
              "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "120%"
          },
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 40,
            end: 70,
            top: 30,
            height: 20
          }
        ],
        xAxis: [
          {
            type: "category",
            data: _This.dates,
            boundaryGap: false,
            axisLine: { lineStyle: { color: "#777" } },
            axisLabel: {
              formatter: function(value) {
                return echarts.format.formatTime("MM-dd", value);
              }
            },
            min: "dataMin",
            max: "dataMax",
            axisPointer: {
              show: true
            }
          },
          {
            type: "category",
            gridIndex: 1,
            data: _This.dates,
            scale: true,
            boundaryGap: false,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { lineStyle: { color: "#777" } },
            splitNumber: 20,
            min: "dataMin",
            max: "dataMax",
            axisPointer: {
              type: "shadow",
              label: { show: false },
              triggerTooltip: true,
              handle: {
                show: true,
                margin: 30,
                color: "#B80C00"
              }
            }
          }
        ],
        yAxis: [
          {
            scale: true,
            splitNumber: 2,
            axisLine: { lineStyle: { color: "#777" } },
            splitLine: { show: true },
            axisTick: { show: false },
            axisLabel: {
              // inside: true,
              formatter: "{value}\n"
              // formatter: function (value, index) {
              //     return value.toFixed(2);
              // }
            }
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        grid: [
          {
            left: 30,
            right: 20,
            top: 120,
            height: 120
          },
          {
            left: 20,
            right: 20,
            height: 40,
            top: 270
          }
        ],
        graphic: [
          {
            type: "group",
            left: "center",
            top: 70,
            width: 300,
            bounding: "raw",
            children: [
              {
                id: _This.today.close,
                type: "text",
                style: { fill: _This.colorList[1], font: _This.labelFont },
                left: 0
              },
              {
                id: _This.today.open,
                type: "text",
                style: { fill: _This.colorList[2], font: _This.labelFont },
                left: "center"
              },
              {
                id: _This.home.minimum,
                type: "text",
                style: { fill: _This.colorList[3], font: _This.labelFont },
                right: 0
              },
              {
                id: _This.home.maximum,
                type: "text",
                style: { fill: _This.colorList[4], font: _This.labelFont },
                right: 0
              }
            ]
          }
        ],
        series: [
          {
            name: this.New.difference,
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#7fbe9e"
              },
              emphasis: {
                color: "#140"
              }
            },
            data: _This.differenceValue
          },
          {
            type: "candlestick",
            name: "CSQA",
            data: _This.chartData,
            itemStyle: {
              normal: {
                color: "#ef232a",
                color0: "#14b143",
                borderColor: "#ef232a",
                borderColor0: "#14b143"
              },
              emphasis: {
                color: "black",
                color0: "#444",
                borderColor: "black",
                borderColor0: "#444"
              }
            }
          },
          {
            name: _This.today.open,
            type: "line",
            data: _This.min,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {
            name: _This.today.close,
            type: "line",
            data: _This.max,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {
            name: _This.home.minimum,
            type: "line",
            data: _This.chMin,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          },
          {
            name: _This.home.maximum,
            type: "line",
            data: _This.chMax,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            }
          }
        ]
      };
    },

    buyPlan(name, type) {
      this.$router.push({ name: name, query: { type: type } });
    },
    random() {
      Index.random({ num: 4 }).then(res => {
        this.robotList = res.data.data;
      });
    },
    // state() {
    //   Index.state({}).then(res => {
    //     this.stateList = res.data.data;
    //     this.$refs.state1.style.width = this.stateList.work;
    //     this.$refs.state2.style.width = this.stateList.saturated;
    //   });
    // },
    //币种行情
    price() {
      Index.getPrice({}).then(res => {
        this.priceList = res.data;
      });
    },
    //轮播
    getBanner() {
      Index.getBanner().then(res => {
        this.banner = res.data;
      });
    },
    getNotice() {
      Owner.getTitle({}).then(res => {
        if (res.code == 1) {
          this.noticeTitle = res.data[0];
        } else {
          mui.toast(res.msg);
        }
      });
    },
    notice() {
      this.$router.push({ name: "Notice" });
    }
  },
  computed: {
    ...mapGetters(["api", "lang", "getLangId"])
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.sel {
  color: #000;
}
.body {
  //   padding: @margin-primary;
  background-color: white;
  .header {
    .display-flex();
    align-items: center;
    padding: 20px 30px;
    background: #dff3fe;
    > img {
      width: 60px;
      margin-right: 20px;
    }
    .hea-con {
      color: #333;
      font-size: 22px;
    }
  }
  .profit-wrap {
    padding: 30px;
    font-size: 24px;
    .profit-list {
      width: 49%;
      padding: 23px;
      margin-bottom: 30px;
      //   .display-flex();
      display: inline-block;
      background: rgba(255, 255, 255, 1);
      box-shadow: 2px 2px 10px 0px rgba(120, 195, 248, 0.3);
      border-radius: 10px;
      &:nth-of-type(odd) {
        margin-right: 1%;
      }
      .profit-list-wrap {
        .display-flex();
        .profit-left {
          flex: 1;
          padding-right: 20px;
          border-right: 1px solid #979797;
          .profit-name {
            // flex: 1.5;
            // text-overflow: hidden;
            // overflow: hidden;
            // white-space: nowrap;
            word-break: break-all;
            height: 110px;
            color: #406ec3;
          }
          .profit-state {
            color: #ec3838;
          }
        }
        .profit-right {
          flex: 1;
          padding-left: 10px;
          word-break: break-all;
          .profit-num {
            color: #30416f;
          }
        }
      }
    }
    .topBtn {
      .display-flex();
      justify-content: space-around;
      .btn-list {
        padding: 10px 20px;
        background: #406ec3;
        border-radius: 5px;
        color: #fff;
        font-size: 28px;
      }
    }
    .progress {
      .progress-left-wrap {
        margin-right: 2%;
        .progress-left {
          width: 30%;
          background: #406ec3;
        }
      }
      .progress-wrap-share {
        position: relative;
        width: 48%;
        height: 14px;
        background: rgba(221, 221, 221, 1);
        border-radius: 10px;
        display: inline-block;
        .progress-left-share {
          position: absolute;
          top: 0;
          left: 0;
          height: 14px;
          display: inline-block;
          border-radius: 10px;
        }
      }
      .progress-right-wrap {
        .progress-right {
          width: 80%;
          background: #ff9f00;
        }
      }
    }
    .progress-bot {
      .progress-con {
        width: 48%;
        display: inline-block;
        text-align: center;
        color: #666;
        &:first-child {
          margin-right: 1%;
        }
      }
    }
  }
  .notice {
    .display-flex();
    align-items: center;
    padding: 25px 30px;
    border-top: 20px solid #f3f3f3;
    border-bottom: 20px solid #f3f3f3;
    .notice-img {
      width: 28px;
      height: 23px;
      margin-right: 15px;
    }
    .notice-con {
      flex: 1;
      .display-flex();
      justify-content: space-between;
      align-items: center;
      .notice-title {
        flex: 1;
        margin-right: 10px;
      }
      .more {
        font-size: 30px;
      }
    }
  }
  .quotation {
    padding: 30px;
    text-align: center;
    border-bottom: 20px solid #f3f3f3;
    .quotation-img {
      width: 53%;
    }
    .quotation-wrap {
      .display-flex();
      padding: 16px;
      margin-top: 30px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 2px 2px 10px 0px rgba(120, 195, 248, 0.3);
      border-radius: 10px;
      .quotation-list {
        flex: 1;
        text-align: center;
        .list-number {
          // flex: 1;
          // &:nth-of-type(2) {
          //   border-left: 1px solid #979797;
          //   border-right: 1px solid #979797;
          // }
        }
      }
    }
    .source {
      padding: 22px 22px 0 22px;
      color: #999;
      font-size: 22px;
      text-align: center;
    }
  }
  .csqa {
    padding: 30px;
    text-align: center;
    .csqa-img {
      width: 53%;
    }
    .csqa-buy {
      margin-top: 23px;
      background: rgba(187, 231, 252, 1);
      border-radius: 10px;
      .csqa-title {
        padding: 24px 0 0 24px;
        color: #406ec3;
        text-align: left;
        font-size: 34px;
      }
      .quotation-wrap {
        .display-flex();
        padding: 5px;
        .quotation-list {
          flex: 1;
          .display-flex();
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 20px;
          text-align: center;
          .csqa-buy-num {
            margin-top: 8px;
            padding: 0 3px;
            word-break: break-all;
            font-size: 28px;
            color: #333;
            // font-weight: 600;
          }
          &:nth-of-type(2) {
            border-left: 1px solid #979797;
            border-right: 1px solid #979797;
          }
        }
      }
    }
    // .source {
    //   padding: 22px 22px 0 22px;
    //   color: #999;
    //   font-size: 22px;
    //   text-align: center;
    // }
  }
}
</style>